<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/assets/vuejs/vue.min.js"></script>
    <script src="/assets/vuejs/vue-router.3.5.1.min.js"></script>
    <script src="/assets/vuejs/vant.min.js"></script>
    <script src="/assets/vuejs/zepto.min.js"></script>
    <script src="/assets/vuejs/floatJS.js"></script>
    <link rel="stylesheet" href="/assets/vuejs/vant.min.css" />
    <style>
        .hebaiBG{background:none !important;}
        .caiBG{background:#00F !important;}
    </style>
</head>
<body>
    <div id="bigApp">
<!--        <div>-->
<!--            <div>我是php传递的值：{{$setting}}</div>-->
<!--            <div>我是vue传递的值：{{aa}}</div>-->
<!--        </div>-->
        <div style="padding-right:80%;">
            <div style="display: flex">
                <div style="flex:1;"><van-field v-model="keyword" label="文本" placeholder="请输入关键词" /></div>
                <div><van-button type="danger" @click="findGoods">查 找</van-button></div>
            </div>
        </div>
        <div style="padding-bottom:80px;">
            <div style="display:flex;flex-wrap:wrap;">
                <div style="width:20%;" v-for="(item, index) in dataArr" v->
                    <div style="padding:10px;margin:10px;" :class="getClass(item.itemId)">
                        <div>
                            <a :href="'https://detail.1688.com/offer/'+item.itemId+'.html'" target="_blank">
                                <img :src="item.imgUrl" style="width:100%;height:auto;" />
                            </a>
                        </div>
                        <div>
                            <span v-for="item22 in item.serviceList" style="margin-right:10px;">
                                <van-button type="primary" size="mini">{{item22.name}}</van-button>
                            </span>
                        </div>
                        <div>
                            <span style="color:#F00;padding-right:10px;">{{item.minPrice/100}}元--{{item.maxPrice/100}}元</span>
                            <span>{{item.title}}</span>
                            <span><van-button type="danger" @click="checkGood(item.itemId, item.imgUrl)">选择入库 {{index+1}}</van-button></span>
                            <span><van-button type="primary" size="small" plain  @click="showAliData(item.itemId, item.imgUrl)">查看阿里数据 {{item.itemId}}</van-button></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="position: fixed;right:0;bottom:0;width:100%;height:80px;background:#aaa;z-index:999;">
            <div style="padding:10px;">
                <div style="display: flex">
                    <div style="flex:1">
                        <div style="display: flex;width:100%;">
                            <div style="margin:5px;" v-for="item in xuanImgArr">
                                <img :src="item" style="width:50px;height:50px;" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <span style="color:#F00;font-weight:bold;font-size:25px;">{{xuanIdsArr.length}}</span>
                        <span><van-button type="info" @click="nextPage">下一页</van-button></span>
                        <span><van-button type="danger" @click="ajaxToDb">确定入库</van-button></span>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="show" style="width:100%;height:100%;background:rgba(3,3,3,0.5);position: fixed;z-index:9;left:0;top:0;">
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    var vue= new Vue({
        el: '#bigApp',
        data:{
            show:false,
            xuanIdsArr:[],
            xuanImgArr:[],
            typepid:{{$typepid}},
            keyword:'{{$keyword}}',
            dataArr: JSON.parse('{{$data}}'),
            page:{{$page}},
            type:{{$type}},
            aa:'i am vue',
            bb:22
        },
        mounted() {
            //vant.Toast('提示'+this.dataArr.length);
        },
        methods:{
            findGoods(){
              var keyword = this.keyword;
              this.page = 1;
              if(keyword==""){
                  //vant.Dialog.alert({message: '请输入要搜索的关键字'});
              }
              window.location.href = '/index.php?s=/store/zzindb.aligoods/getGoodList/typepid/'+this.typepid+'/type/'+this.type+'/keyword/'+keyword+'/page/'+this.page;
            },
            checkGood(id,img){
                var cnt = this.xuanIdsArr.indexOf(id);
                if(cnt > -1){
                    this.xuanIdsArr.splice(cnt, 1);
                    this.xuanImgArr.splice(img, 1);
                }
                else{
                    this.xuanIdsArr.push(id);
                    this.xuanImgArr.push(img);
                }
            },
            showAliData(id,img){
                var url = '/index.php?s=/store/zzindb.aligoods/aliGoodDesArrPrint/gid/'+id;
                window.open(url);
            },
            getClass: function(id){
                let str = this.xuanIdsArr.indexOf(id)>-1 ? 'caiBG' : 'hebaiBG';
                return str; //编辑器提示错误信息，除非这样写：getClass: function
            },
            nextPage(){
                if(this.xuanIdsArr.length>0){
                    vant.Dialog.alert({message: '有选中的商品未入库'}).then(() => {});
                    //vant.Toast('有选中的商品未入库');
                }
                else{
                    this.page++;
                    var keyword = this.keyword;
                    window.location.href = '/index.php?s=/store/zzindb.aligoods/getGoodList/typepid/'+this.typepid+'/type/'+this.type+'/keyword/'+keyword+'/page/'+this.page;
                }
            },
            ajaxToDb(){
                if(this.xuanIdsArr.length==0){
                    vant.Dialog.alert({message: '请选择要入库的商品'}).then(() => {});
                }
                else{
                    //ajax构建商品数据结构并入库
                    this.show=true;
                    var _this = this;
                    var _goodsStr = this.xuanIdsArr.join(',');
                    $.post('/index.php?s=/store/zzindb.aligoods/ajaxGoodToDb', {"goodIdStr": _goodsStr, "page":this.page, "type1":this.typepid, "type2":this.type}, function (_res) {
                        _this.show=false;
                        var res = JSON.parse(_res);
                        if(res.code){
                            vant.Dialog.alert({message: res.msg}).then(() => {
                                _this.page++;
                                var keyword = _this.keyword;
                                window.location.href = '/index.php?s=/store/zzindb.aligoods/getGoodList/typepid/'+_this.typepid+'/type/'+_this.type+'/keyword/'+keyword+'/page/'+_this.page;
                            });
                        }
                        else{
                            vant.Dialog.alert({message: res.msg}).then(() => {});
                        }
                    })
                }
            }
        }
    });
    Vue.use(vant.Icon);
    Vue.use(vant.Progress);
    Vue.use(vant.Rate);
    Vue.use(vant.Divider);
    Vue.use(vant.Tabs);
    Vue.use(vant.List);
    Vue.use(vant.Dialog);
</script>